<!-- element公共select选择框 -->
<template>
  <el-select
    v-model="vmodel"
    :placeholder="placeholder"
    @change="changeModel"
    :clearable="clearable"
    @visible-change="visChange"
  >
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    model: {
      required: true
    },
    placeholder: {
      type: String,
      default: "请选择"
    },
    options: {
      type: Array,
      default: () => []
    },
    clearable: {
      type: Boolean,
      default: true
    },
    visibleChange: {
      type: Function,
      default: () => function() {}
    }
  },
  components: {},
  data() {
    return {
      vmodel: null
    };
  },
  computed: {},
  watch: {
    model: {
      handler(newVal) {
        this.vmodel = this.model;
      },
      //是否初始执行
      immediate: true
    }
  },
  methods: {
    //实现数据双向绑定
    changeModel() {
      this.$emit("update:model", this.vmodel);
    },
    visChange(event) {
      if (event) {
        this.visibleChange();
      }
    }
  }
};
</script>
<style lang="scss" scoped></style>
